Vue.config.productionTip = false
// navbar1组件

Vue.component('navbar1', {
    template: `
            <div :style="{
                'display':'flex',
                'flex-direction': 'column',
                'marginRight':'20px'
            }">
                <span :style="navbar1styleObj">{{denglu}}</span>
                <span :style="navbar1styleObj">{{zhuce}}</span>
                <span :style="navbar1styleObj">{{liaojie}}</span>
            </div>
        `,
    data() {
        return {
            navbar1styleObj: {
                'color': 'white',
                'fontSize': '14px'
            },
            denglu:'登录',
            zhuce:'注册',
            liaojie:'了解'
        }
    }

})
// navbar组件
Vue.component('navBar', {
    props: {
        value: String,
        showStatus: Boolean,
        title: {
            type: String,
            required: 'true',
        }
    },
    data() {
        return {
            styleObj: {
                'width': '250px',
                'height': '30px',
                'borderColor': 'pink',
                'marginRight': '30px'
            },
            search:'搜索',
            msg:'这里可以当百度用'
        }
    },
    template: `
        <div class="qf-ui-navBar">
            <span>&lt;<span v-show="showStatus" @click="sendLeftFn">返回</span></span>
            <span>{{ title }}</span>
            <span @click="sendRightFn">{{search}}</span>
            <input 
                type="" 
                :placeholder="msg"
                :value="value" 
                @input="$emit('input',$event.target.value)"
                :style="styleObj"
            >
            <navbar1></navbar1>
        </div>
    `,
    methods: {
        sendRightFn() {
            this.$emit('right-click')
        },
        sendLeftFn() {
            this.$emit('left-click')
        }
    },
})

// dialog组件 
Vue.component('qfDialog', {
    props: {
        title: {
            type: String,
            default: '默认标题'
        },
        content: String,
        visible: {
            type: Boolean,
            default: false,
        }
    },
    data(){
        return{
            del:'取消',
            confirm:'确定'
        }
    },
    template: `
        <div class="qf-dialog" v-if="visible">
            <div class="box">
                <div class="header">{{title}}</div>
                <div class="main">
                    {{content}}
                </div>
                <div class="footer">
                    <button @click="$emit('update:visible', false)">{{del}}</button>
                    <button>{{confirm}}</button>
                </div>
            </div>
        </div>
    `
})
// 按钮组件
Vue.component('qf-button', {
    props: {
        type: {
            type: String,
            default: 'primary'
        },
        slotData: {
            type: String,
            default: 'zhuyaoanniu'
        }
    },
    template: `
        <button type="button" :class="['qf-button', 'qf-button--'+type, 'qf-button--normal']" @click="sendFn">
        <div class="van-button__content"><!---->
        <span class="van-button__text">
        <slot :name="slotData"></slot>
        </span>
        <!----></div></button>
    `,
    methods: {
        sendFn() {
            this.$emit('click')
        }
    }
})
// 表格组件
Vue.component('qfTable', {
    props: {
        columns: {
            type: Array,
            default: []
        },
        data: {
            type: Array,
            default: []
        }
    },
    template: `
        <div class="table">
        <table border="1" cellpadding="10" cellspacing="0">
            <th v-for="thitem in columns">{{thitem.title}}</th>
            <tr v-for="tritem in data">
                <td v-for="tditem in columns">{{tritem[tditem.key]}}</td>
            </tr>
        </table>
        <slot></slot>
        </div>
    `
})

// 表单组件

Vue.component('qfForm', {
    props: {
        firstData: {
            type: String,
            required: true
        },
        secondData: {
            type: String,
            required: true
        },
        thirdData: {
            type: String,
            required: true
        },
        fourData: {
            type: String,
            required: true
        },
        visible: {
            type: Boolean,
            default: false,
        },
        inputType: {
            type: String,
            default: 'text'
        }

    },
    data() {
        return {
            formData: {
                uname: '',
                password: '',
                question: '',
                answer: ''
            },
            msg:'thhan封装的表单组件'

        }
    },
    template: `
        <fieldset>
        <legend>{{msg}}</legend>
            {{firstData}}：<input type="text" v-model="formData.uname">
            {{secondData}}：<input :type="inputType" v-model="formData.password">
            {{thirdData}}：<input type="text" v-model="formData.question">
            {{fourData}}：<input type="text" v-model="formData.answer">
            <button v-if="visible" @click="$emit('submit',formData)">点击提交</button>
            <slot></slot>
        </fieldset>
    `
})

// 分页组件

Vue.component('page', {
    props: {
        totalNum: {
            type: Number,
            default: 0
        },
        pageSize: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            totalPage: 0,
            msg:'分页组件'
        }
    },
    watch: {
        total: {
            handler(newdata) {
                this.totalPage = Math.ceil(this.totalNum / this.pageSize)
            },
            immediate: true,
        }
    },
    template: `
        <fieldset>
            <legend>{{msg}}</legend>
            <div class="qf-page">
                <span v-for="num in totalPage" @click="$emit('click-page', num)">{{ num }}</span>
            </div>
        </fieldset>  
    `
})

// loading组件

Vue.component('loading', {
    props: {
        visible: {
            type: Boolean,
            default: false,
        },

    },
    data(){
        return{
            msg:'loading组件',
            data:'点击加载/取消'
        }
    },
    template: `
        <fieldset>
                <legend>{{msg}}</legend>
                <div class="qf-loading" v-if="visible">
                    <slot></slot>
                </div>
                <button @click="$emit('click')">{{data}}</button>
                
        </fieldset>
    
    `
})
// 三角形提示框组件


Vue.component('sanLeftTip',{
    props:{
        msg:String
    },
    template:`
        <div class="tip">
        <div class="tip-trangle-left"></div>
        {{msg}}
        </div>
`})
Vue.component('sanRightTip',{template:`
        <div class="tip">
        <div class="tip-trangle-right"></div>
        我是提示框<br/>
        内容可以自定义
        </div>
`})
Vue.component('sanTopTip',{
    props:{
        msg:String
    },
    template:`
        <div class="tip">
        <div class="tip-trangle-top"></div>
        {{msg}}
        </div>
`})
Vue.component('sanBottomTip',{
    props:{
        msg:String
    },
    template:`
        <div class="tip">
        <div class="tip-trangle-bottom"></div>
       {{ msg }}
        </div>
`})